<template>
  <view class="modal" :animation="animationData1" @touchmove.stop.prevent>
    <view class=" content-wrap" :animation="animationData2">
      <view class="content-header flex">
        <view class="flex h-100p flex-aic m-l-10" v-if="type == 0">
          空差
          <view @click.stop="clickGap(item, index)" :class="{ 'active': item.active, 'gap': !item.active }" class="gap"
            v-for="(item, index) in airGaps" :key="index">
            {{ item.label }}
          </view>
        </view>
        <view @click="delCloth" class="flex h-100p flex-aic c-red m-l-20" v-if="type == 1">
          删除布匹
        </view>
        <view :class="type == 0 ? 'input-contant' : 'input-contant-num'" class="m-l-10">{{ inputValue.join("") }}</view>
        <view class="confirm-btn" @click="delect">删除</view>
        <view class="cancel-btn" @click="close">取消</view>
      </view>
      <view class="key-box">
        <view :class="{
          'handel-btn': ['.', '完成', ''].includes(item),
          'active-btn': activeKey === item,
          'active-handel-btn':
            activeKey === item && ['.', '完成'].includes(item),
        }" v-for="(item, index) in keyboardList" :key="index" @click="setValue(item)">{{ item }}</view>
      </view>
    </view>
  </view>
</template>
<script>
import {getGoodsListSpaceDiffTypeOptionsData} from '@/apis/bill/information/product'
export default {
  data() {
    return {
      airGaps: [],
      animationData1: {},
      animationData2: {},
      activeKey: "",
      inputValue: [],
    };
  },
  props: {
    // 键盘显隐
    visible: {
      type: Boolean,
      default: false,
    },
    // 键盘数据回显
    keyValue: {
      type: Array,
      default: [],
    },
    //是否为带小数的数字键盘
    decimals: {
      type: Boolean,
      default: true,
    },
    //0 显示空差的值
    //1 显示删除布匹
    type: {
      type: [Number, String],
      default: 1,
    },
    //小数点前整数的位数
    maxLength: {
      type: [Number, String],
      default: 9,
    },
    //小数点后的位数
    pointLength: {
      type: [Number, String],
      default: 2,
    },
    //最大的值
    max: {
      type: [Number, String],
      default: 999999999,
    },
    //最小的值
    min: {
      type: [Number, String],
      default: 0,
    },
    // 空差(+ - × ÷)
    // 覆盖的情况下 数组里面必须包含 需要显示的value值 以及 用来切换状态的active
    airGap: {
      type: Array,
      default: function () {
        return [
        //   { id: 1, value: '+', active: false },
        //   { id: 2, value: '-', active: false },
        //   { id: 3, value: '×', active: false },
        //   { id: 4, value: '÷', active: false },
        ];
      }
    },
  },
  computed: {
    keyboardList() {
      return this.decimals
        ? ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "完成"]
        : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "完成"];
    },
  },
  watch: {
    visible(val) {
      if (this.keyValue.length > 0) {
        this.inputValue = this.keyValue
      } else {
        this.inputValue = [];
      }
      if (val) this.enterAnimate();
      else this.leaveAnimate();
    },
    keyValue(val){
      this.inputValue = val
    },
  },
  created() {
    if(this.airGap.length <= 0){
      this.getGoodsList()
    }else{
      this.airGaps = this.airGap
    }
    
  },
  mounted() {

  },
  methods: {
    // 获取模式列表
    getGoodsList() {
      // 1. 查询列表信息
      uni.showLoading({
        title: '加载中'
      })
      getGoodsListSpaceDiffTypeOptionsData().then((res) => {
        if (!res.flag) return;
        this.airGaps = res.data;
        uni.hideLoading()
      }).catch(err => {
        uni.hideLoading()
      });
    },
    //删除布匹
    delCloth() {
      this.inputValue = []
      this.$emit('delCloth')
    },
    clickGap(item, index) {
      if (item.active) {
        item.active = false
        this.$emit('clickGap', item)
        return
      }
      this.airGaps.forEach(r => {
        r.active = false
      });
      item.active = true
      this.$forceUpdate()
      this.$emit('clickGap', item)
    },
    setValue(data) {
      this.activeKey = data;
      let timer = setTimeout(() => {
        this.activeKey = "-";
        clearTimeout(timer);
      }, 100);

      if (
        !data ||
        (data !== "完成" &&
          this.inputValue.includes(".") &&
          this.inputValue.join("").split(".")[1].length === this.pointLength)
      )
        return false;

      if (
        this.inputValue.length === 1 &&
        this.inputValue[0] === "0" &&
        !["完成", "."].includes(data)
      ) {
        return (this.inputValue = [data]);
      }

      if (data !== "完成") {
        if (this.inputValue.includes(".")) {
          if (
            this.inputValue.join("").split(".")[0].length === this.maxLength
          ) {
            return false;
          }
        } else if (this.inputValue.length === this.maxLength) {
          return false;
        }
      }

      if (data === "完成") {
        // this.$emit("keyFun",data)
        this.confirm()
        return
      }
      if (data === ".") {
        if (!this.inputValue.length || this.inputValue.includes("."))
          return false;
      }
      this.$emit("keyFun",data)
      this.inputValue.push(data);
    },
    close() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    delect(){
      this.inputValue.length && this.inputValue.pop()
      this.$emit("delectFun",this.inputValue)
    },
    confirm() {
      let isActive = false
      this.inputValue.forEach(itme => {
        if(itme && itme != ''){
          isActive = true
        }
      });
      if(this.inputValue.length <= 0 || !isActive){
        this.delCloth()
        // uni.showToast({
        //   title: '请输入值',
        //   duration: 1500,
        //   icon: "none",
        // });
        return
      }
      let result = Number(this.inputValue.join(""));
      if (result < this.min) {
        uni.showToast({
          title: `最小值为${this.min}`,
          duration: 1500,
          icon: "none",
        });
        return;
      } else if (result > this.max) {
        uni.showToast({
          title: `最大值为${this.max}`,
          duration: 1500,
          icon: "none",
        });
        return;
      }
      this.inputValue = []
      this.$emit("confirm", result);
      // this.close();
    },
    enterAnimate() {
      this.animation1 = uni.createAnimation();
      this.animation2 = uni.createAnimation();
      this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
        duration: 500,
        timingFunction: "ease",
      });
      this.animation2.translateY(0).step({
        timingFunction: "ease-out",
        duration: 500,
      });
      this.animationData1 = this.animation1.export();
      this.animationData2 = this.animation2.export();
    },
    leaveAnimate() {
      this.animation1 = uni.createAnimation();
      this.animation2 = uni.createAnimation();
      this.animation1.backgroundColor("rgba(0,0,0,0)").step({
        duration: 500,
        timingFunction: "ease",
      });
      this.animation2.translateY(500).step({
        timingFunction: "ease-out",
        duration: 500,
      });
      this.animationData1 = this.animation1.export();
      this.animationData2 = this.animation2.export();
    },
  },
};
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;

  .content-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    transform: translateY(100%);

    .content-header {
      width: 100%;
      height: 80upx;
      background: rgba(255, 255, 255, 1);
      float: right;

      .gap {
        width: 40upx;
        text-align: center;
        border: 1px solid #bbb9be;
        margin: 0 10upx;
        border-radius: 10upx;
      }

      .active {
        background-color: rgba(24, 175, 233, 1);
        color: #fff;
        border: 1px solid #18afe9;
      }

      .input-contant {
        width: 40%;
        text-align: center;
        line-height: 80upx;
        font-size: 40upx;
      }
        
      .input-contant-num{
        width: 40%;
        text-align: center;
        line-height: 80upx;
        font-size: 40upx;
      }

      .cancel-btn {
        padding-right: 30upx;
        color: #147ff2;
        line-height: 80upx;
        position: absolute;
        top: 0;
        right: 0;
      }

      .confirm-btn {
        padding-right: 30upx;
        color: #147ff2;
        line-height: 80upx;
        position: absolute;
        top: 0;
        right: 90rpx;
      }
    }

    .key-box {
      margin-top: 60upx;
      display: flex;
      flex-flow: wrap;
      width: 100%;

      view {
        width: 251upx;
        height: 100upx;
        border: 1upx solid rgb(235, 237, 240);
        box-sizing: border-box;
        text-align: center;
        line-height: 100upx;
        font-size: 40upx;
        font-weight: bold;
        margin: 0 -1upx -1upx 0;

        &:hover {
          z-index: 1;
          border: 1upx solid rgb(235, 237, 240);
        }
      }

      .handel-btn {
        background: rgb(235, 237, 240);
        font-size: 30upx;
      }

      .active-btn {
        background: rgb(235, 237, 240);
      }

      .active-handel-btn {
        background: rgb(252, 252, 252);
      }
    }
  }
}
</style>
